import React, { useEffect, useState } from 'react'
import './index.scss'

import { createFromIconfontCN } from '@ant-design/icons'
import { Button,Empty } from 'antd'
import { info,getAllLog } from '../../api'
import AnimatedNumbers from "react-animated-numbers";
const IconFont = createFromIconfontCN({
    scriptUrl: [
        '//at.alicdn.com/t/c/font_3906143_kbas9kvwru.js'
    ]
})
interface IInfoData2 {
    id: Number,
    creator: string,
    account: string,
    password: string,
    vip: string,
    online: number
}
interface IInfoData {
    code?: number,
    data?: Array<IInfoData2>,
    total?: number,
    line?: number,
    online?: number
}
interface ILog { 
    id: number,
    creator: string,
    account: string,
    msg:string
}
export default function User() {
    const [infoData, setInfoData] = useState<IInfoData>({})
    const [log,setLog] = useState<Array<ILog>>([])
    useEffect(() => {
        info().then(res => {
            setInfoData(res.data)
        })
    }, [])
    useEffect( () => {
        getAllLog().then(res => { 
            setLog(res.data.data)
        })
     },[])
    return (
        <div className='user'>
            <div className='user-info'>
                <div className='info-box user-num'>
                    <div className='num-s'>
                        <IconFont type='icon-yonghu' style={{ fontSize: 20, padding: 15, backgroundColor: '#6777ef', color: 'white', boxShadow: '0 2px 6px #acb5f6', borderRadius: 3 }}></IconFont>
                        <div className='user-title'>
                            <p>已开通账号</p>
                            <h1><AnimatedNumbers
                                includeComma
                                animateToNumber={((infoData as IInfoData).total as number)||0}
                                fontStyle={{ fontSize: 25 }}
                                configs={[
                                    { mass: 1, tension: 220, friction: 100 },
                                    { mass: 1, tension: 180, friction: 130 },
                                    { mass: 1, tension: 280, friction: 90 },
                                    { mass: 1, tension: 180, friction: 135 },
                                    { mass: 1, tension: 260, friction: 100 },
                                    { mass: 1, tension: 210, friction: 180 },
                                ]}
                            ></AnimatedNumbers> 个</h1>
                        </div>
                    </div>
                </div>
                <div className='info-box now-ol'>
                    <div className='ol-num'>
                        <IconFont type='icon-weizhi' style={{ fontSize: 20, padding: 15, backgroundColor: '#3abaf4', color: 'white', boxShadow: '0 2px 6px #82d3f8', borderRadius: 3 }}></IconFont>
                        <div className='ol-title'>
                            <p>当前在线</p>
                            <h1><AnimatedNumbers
                                includeComma
                                animateToNumber={(infoData as IInfoData).online||0}
                                fontStyle={{ fontSize: 25 }}
                                configs={[
                                    { mass: 1, tension: 220, friction: 100 },
                                    { mass: 1, tension: 180, friction: 130 },
                                    { mass: 1, tension: 280, friction: 90 },
                                    { mass: 1, tension: 180, friction: 135 },
                                    { mass: 1, tension: 260, friction: 100 },
                                    { mass: 1, tension: 210, friction: 180 },
                                ]}
                            ></AnimatedNumbers> <span style={{ fontSize: 18 }}>/</span> <AnimatedNumbers
                            includeComma
                            animateToNumber={(infoData as IInfoData).total||0}
                            fontStyle={{ fontSize: 25 }}
                            configs={[
                                { mass: 1, tension: 220, friction: 100 },
                                { mass: 1, tension: 180, friction: 130 },
                                { mass: 1, tension: 280, friction: 90 },
                                { mass: 1, tension: 180, friction: 135 },
                                { mass: 1, tension: 260, friction: 100 },
                                { mass: 1, tension: 210, friction: 180 },
                            ]}
                        ></AnimatedNumbers></h1>
                        </div>
                    </div>

                </div>
                <div className='info-box err-num'>
                    <div className='err-s'>
                        <IconFont type='icon-icon_wrong' style={{ fontSize: 20, padding: 15, backgroundColor: '#d9363e', color: 'white', boxShadow: '0 2px 6px d9363e', borderRadius: 3 }}></IconFont>
                        <div className='err-title'>
                            <p>账号错误</p>
                            <h1 style={{ color: (infoData.total as number) - (infoData.online as number) > 0 ? 'red' : '#29bf42' }}><AnimatedNumbers
                                includeComma
                                animateToNumber={(infoData.total as number) - (infoData.online as number)||0}
                                fontStyle={{ fontSize: 25 }}
                                configs={[
                                    { mass: 1, tension: 220, friction: 100 },
                                    { mass: 1, tension: 180, friction: 130 },
                                    { mass: 1, tension: 280, friction: 90 },
                                    { mass: 1, tension: 180, friction: 135 },
                                    { mass: 1, tension: 260, friction: 100 },
                                    { mass: 1, tension: 210, friction: 180 },
                                ]}
                            ></AnimatedNumbers> 个</h1>
                        </div>
                    </div>
                </div>
                <div className='info-box opened-user'>
                    <div className='opened-s'>
                        <IconFont type='icon-jinsanfang01' style={{ fontSize: 20, padding: 15, backgroundColor: '#ffa426', color: 'white', boxShadow: '0 2px 6px #ffc473', borderRadius: 3 }}></IconFont>
                        <div className='opened-title'>
                            <p>开通账号</p>
                            <Button onClick={() => { window.open('http://shop.aercloud.cn/links/3BADB7D6')}} type="primary" size="small" style={{ backgroundColor: '#6777EF', fontWeight: 600, marginTop: 10 }}>购买卡密</Button>
                        </div>
                    </div>
                </div>
            </div>
            <div className='announcement-log'>
                <div className='announcement-log-div announcement'>
                    <div className='title'>
                        <IconFont type='icon-gonggao'></IconFont>
                        <span>公告</span>
                    </div>
                    <div className='announcement-log-content'>
                        <p style={{fontWeight:700}}>注意事项</p>
                        <p style={{ paddingLeft: '2em', color: 'red', fontWeight: '600' }}>1.禁止重复开通同一个账号账号,重复开账号会造成账号充值时间重置,如果需要充值请去已开通账号里续费账号，重复开账号造成账号异常的后果自负</p>
                        <p style={{ textIndent: '2em', color: 'red', fontWeight: '600' }}>2.处理账号异常请去已开通账号列表点击红色异常按钮，切记不要重复添加同一个账号</p>
                        <p style={{ textIndent: '2em', color: 'red', fontWeight: '600' }}>3.禁止重复开通同一个账号账号</p>
                        <p style={{ textIndent: '2em', color: 'red', fontWeight: '600' }}>4.禁止重复开通同一个账号账号</p>
                        <p style={{ textIndent: '2em', color: 'red', fontWeight: '600' }}>5.禁止重复开通同一个账号账号</p>
                        <p style={{ fontWeight: 700 }}>解答</p>
                        <p style={{textIndent:'2em',fontWeight: '600'}}>1.这个会造成封号吗？</p>
                        <p style={{ textIndent: '2em', fontWeight: '600' }}>答:会，如果没有网易云音乐人几率为0，有音乐人有很低几率封音乐人</p>
                        <p style={{ textIndent: '2em', fontWeight: '600',marginTop:'10px' }}>2.自动任务都包含什么？</p>
                        <p style={{ textIndent: '4em', fontWeight: '600' }}>(一)签到包括PC版签到，手机端签到</p>
                        <p style={{ textIndent: '4em', fontWeight: '600' }}>(二)打卡会把每日听300首听满，升级坐火箭</p>
                        <p style={{ paddingLeft:'4em',boxSizing: 'border-box', fontWeight: '600' }}>(三)音乐人任务包含发布主创说、分享歌曲到动态并评论、签到音乐人中心、自动领取云豆(每天最少7-12个云豆)</p>
                        <p style={{ textIndent: '2em', fontWeight: '600',marginTop:'10px' }}>3.在我账号上发的东西需要我自己删除吗？</p>
                        <p style={{ paddingLeft: '4em', boxSizing: 'border-box', fontWeight: '600' }}>答:这个不用担心的，在每次完成任务后都会自动清除发布的信息</p>
                        <p style={{ textIndent: '2em', fontWeight: '600',marginTop:'10px' }}>4.这个都是什么时候运行，会跟我听歌发生冲突吗？</p>
                        <p style={{ paddingLeft: '4em', boxSizing: 'border-box', fontWeight: '600' }}>答:每天凌晨4点自动开始任务，不会和正常听歌冲突的</p>

                        
                    </div>
                </div>
                <div className='announcement-log-div log'>
                    <div className='title'>
                        <IconFont type='icon-rizhi'></IconFont>
                        <span>日志</span>
                    </div>
                    <div className='announcement-log-content'>
                        {
                           log[0]?log.map((item) => <div key={item.id}>{ item.msg }</div>):<Empty description='暂无日志'></Empty>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
